<template>
    <div>
        <input
                type="file"
                id="id"
                name="image"
                class="getImgUrl_file"
                @change="shangc($event)"
                accept="image/jpg, image/jpeg, image/png"
        />
        <br/>
        <img :src="picPath" alt="">


        <h4>识别结果:</h4>
        <table>
            <tr>
                <th>物品名称</th>
                <th>所属类目</th>
                <th>识别度</th>
            </tr>
            <tr  v-if="data" v-for="item in data"  >
                <td>{{item.keyword}}</td>
                <td>{{item.root}}</td>
                <td>{{item.score}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
    import axios from "axios";
    import qs from 'qs'
    export default {
        data() {
            return {
                data: "",
                picPath:'',
                access_token:''
            };
        },
        mounted (){
            // axios.post('/baiduApi/oauth/2.0/token?grant_type=client_credentials&client_id=MLdcO8Dvg58qTvR1plj1WYpG&client_secret=IswcXMjorFy5hQ5Ru6ffx5NtIvRZ270e').then(res =>{
            //     if(res.status ==200){
            //         this.access_token = res.data.access_token;
            //     }
            // })
            axios({
                url: `/baiduApi/oauth/2.0/token?client_id=MLdcO8Dvg58qTvR1plj1WYpG&client_secret=IswcXMjorFy5hQ5Ru6ffx5NtIvRZ270e&grant_type=client_credentials`,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json'
                },
            })
        },
        methods: {
            shangc(e) {
                let files = document.getElementById("id").files[0];
                let name = document.getElementById("id").files[0].name;
                // this.picPath=document.getElementById("id").value

                let arr = name.split(".");
                let fileSize = 0;
                let fileMaxSize = 10240; //1M
                if (files) {
                    fileSize = files.size;
                    if (fileSize > 10 * 1024 * 1024) {
                        alert("文件大小不能大于10M！");
                        file.value = "";
                        return false;
                    } else if (fileSize <= 0) {
                        alert("文件大小不能为0M！");
                        file.value = "";
                        return false;
                    }
                } else {
                    return false;
                }
                //转码base64
                let reader = new FileReader();
                let imgFile;
                // let that = this
                reader.readAsDataURL(files);
                reader.onload = async e => {
                    imgFile = e.target.result;
                    let arr = imgFile.split(",");
                    this.faceBase64 = arr[1];
                    this.picPath='data:image/png;base64,'+arr[1]
                    // console.log(imgFile)
                    console.log(arr[1]);
                    const { data: data } = await axios.post(
                        // "/baiduApi/rest/2.0/ocr/v1/license_plate",
                        "/baiduApi/rest/2.0/image-classify/v1/car",
                        qs.stringify({
                            access_token:
                                // "24.a85de33ed9712ee3f6fec1951b822904.2592000.1715832200.282335-60889842",
                            '24.b1476fbd8ae1267b66aa2883acd18696.2592000.1715835664.282335-61506332',
                            image: arr[1],
                            with_face:1
                        })
                    );
                    this.data = data.result;
                    console.log(this.data);
                };
            }
        }
    };
</script>

<style  scoped>
    table,th,td
    {
        border:1px solid orangered;

    }
    img{
        width: 400px;
        height: 400px;
        border: 1px solid red;
    }
</style>
